<script lang="ts" setup>
import { ElPopconfirm, ElButton } from 'element-plus'
import { ActionItem } from '../types'
import { PropType } from 'vue'

// defineOptions({ name: 'TableAction' })
defineProps({
    actions: {
        type: Array as PropType<ActionItem[]>,
        default: () => []
    }
})
</script>

<template>
  <div>
    <template v-for="(action, index) in actions" :key="index">
      <el-popconfirm v-if="action.popconfirm" v-bind="action.popconfirm">
        <template #reference>
          <el-button v-bind="action">
            <template v-if="action.label">{{ action.label }}</template>
          </el-button>
        </template>
      </el-popconfirm>
      <el-button v-else v-bind="action">
        <template v-if="action.label">{{ action.label }}</template>
      </el-button>
    </template>
  </div>
</template>

<style lang="scss" scoped></style>
